/*banner*/
.banner-go{position: absolute; bottom: 100px; left: 0; z-index: 3; width: 100%; display: flex;align-items: center; justify-content: center;}
.banner-go img{width: 30px;animation: goyet 1s infinite;}
@media (max-width:960px) {
	.banner-go img{width: 20px;}
}
@media (max-width:1920px) {
	.banner-go img{width: 20px;}.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;padding-top:150px}
}
@media (max-width:768px) {
	.banner-go {display: none;}
}
@keyframes goyet{
	0%   {transform: translateY(15px);}
	50%  {transform: translateY(20px);}
	100% {transform: translateY(15px);}
}
.i-banner .swiper-slide img{ width:100%;}
.i-banner .swiper-pagination-bullet {position: relative;width: 30px;height: 3px;border-radius: 4px!important; margin-right: 10px;background: #ccc;border-radius: 0;opacity: 1;transition: all 3s;outline: none;}
.i-banner .swiper-pagination-bullet:before {position: absolute;top: 0;left: 0;content: "";z-index: 1;width: 100%;height: 3px;background-color: #444;display: none;border-radius: 3px!important;}
.timer-cl:before {animation: liner 5s ease-in-out;display: block !important;}
@keyframes liner {from {width: 0;opacity: 0;}to {width: 100%;opacity: 1;}}

/*main-title*/
.main-title{text-align: center; position:relative; padding-top: 80px;}

.main-title b{font-size: 34px; display: block; text-transform: uppercase;color:#e05717}
.main-title span{font-size: 24px; display: block; color: #666; margin: 10px 0;}
@media (max-width:768px) {
	.main-title{padding-top: 35px;}
	.main-title::before{height: 40px;}
	.main-title b{font-size: 28px;}
	.main-title span{font-size: 18px; margin: 7px 0;}.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;}
}
@media (max-width:768px) {
	.main-title b{font-size: 20px;}
	.main-title span{font-size: 16px; margin: 7px 0;}
	.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;padding-top:60px}
}
@media (max-width:400px) {
	.main-title::before{height: 25px;}
	.main-title b{font-size: 14px;}
	.main-title span{font-size: 16px; margin: 4px 0;}
		.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;padding-top:50px}
}



/*case*/
.i-case{padding: 60px 0; transition: all .3s;}
.i-case-content {margin-top: 50px;}
.i-case-content li{float: left; width: 50%; margin-bottom: 25px; padding: 0 15px;}
.i-case-content li:first-child,
.i-case-content li:last-child{width: 50%;}
.i-case-content li:first-child {animation-delay:.6s !important;}
.i-case-content li:nth-child(2) {animation-delay:.8s !important;}
.i-case-content li:nth-child(3) {animation-delay:1s !important;}
.i-case-content li:nth-child(4) {animation-delay:1.2s !important;}

.i-case-content li a{display: block;}
.i-case-content .i-case-img{ width: 100%; height: 100%; position: relative;}
.i-case-content .i-case-img img{width: 100%; visibility: hidden;}
.i-case-content .i-case-img span{
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 0%; 
	visibility: hidden;
	text-align: center;
	color: #FFFFFF;
	vertical-align: middle;
	line-height: 0px;
	font-size: 18px;
	background-color: rgba(0,0,0,.7);
}

.i-case-content .i-case-txt{height: 70px; padding: 15px 0; }
.i-case-content .i-case-txt h3{margin-bottom: 8px; font-size: 20px; line-height: 36px; }
.i-case-content .i-case-txt h3 .fl{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:80%;transition: all 0s;}
/* .i-case-content .i-case-txt p{font-size: 14px; color: #ccc; transition: all .2s;} */
.i-case-content .i-case-txt .fr{font-size:18px; transition: all 0s;}

.i-case-content li a:hover .i-case-txt{background-color: #666; padding: 15px 20px; }
.i-case-content li a:hover .i-case-txt h3,
.i-case-content li a:hover .i-case-txt p,
.i-case-content li a:hover .i-case-txt p span{color: #eee;}

.i-case-more{text-align: center; margin: 30px ;}
.i-case-more a{margin-top: 35px; display: inline-block;  padding: 0 25px; line-height: 40px; background-color: #333; color: #fff;}
.i-case-more a:hover {background-color: var(--main-color); color: #fff; border-color: var(--main-color);}
.i-case-content li:hover .i-case-img span{height: 100%; visibility: visible;line-height: 460px;}

@keyframes myfirst
{
	from {background-size: cover}
	to {background-size: 200%}
}
@media (max-width:1400px) {
	.i-case-content .i-case-txt h3 .fr{font-size: 16px;}
}
@media (max-width:1200px) {
	.i-case-content .i-case-img{height: 360px;}
	.i-case-content .i-case-txt h3{font-size: 18px; }
	.i-case-content .i-case-img{height: 260px;}
	.i-case-content .i-case-txt h3 .fl{width:60%;}
	.i-case-content li:hover .i-case-img span{line-height: 260px;}
}
@media (max-width:840px) {
	.i-case-more{margin: 10px ;}
	.i-case{padding: 40px 0;}
	.i-case-content li{width: 100%; margin-bottom: 0px;}
	.i-case-content li:first-child,
	.i-case-content li:last-child{width: 100%; margin-top:10px}
	.i-case-content .i-case-img{height:auto;background: none;}
	.i-case-content .i-case-img img{visibility: visible;}
	.i-case-content .i-case-img span{display: none;}
	.i-case-content .i-case-txt .fr{font-size: 14px;}
	.i-case-content .i-case-txt h3 .fl{width:70%;font-size: 16px;}
}
@media (max-width:400px) {
	.i-case-content .i-case-txt{padding: 5px 0; height: 60px; }
	.i-case-content .i-case-txt .fr{font-size: 12px !important;}
	.i-case-content .i-case-txt h3 .fl{font-size: 14px;}
	.i-case-more a{margin-top: 0px;}
	.i-case-content li{padding: 0px; margin-top:10px}
}

/*news*/
.i-news{background: #f6f6f6; padding: 60px 0;}
.i-news-title{text-align: center; margin: 30px 0; font-size: 18px;}
.i-news-title a{margin: 0 20px; display: inline-block;}
.i-news-list ul{float: left; width: 33.33%; padding: 0 15px; }
.i-news-list ul li{margin-bottom: 30px;}

.i-news-list ul li:first-child {animation-delay:.6s !important;}
.i-news-list ul li:nth-child(2) {animation-delay:1s !important;}
.i-news-list ul li:nth-child(3) {animation-delay:.8s !important;}
.i-news-list ul li:nth-child(4) {animation-delay:1s !important;}
.i-news-list ul li:nth-child(5) {animation-delay:.6s !important;}

.i-news-list ul li a{ position: relative; display: block; width: 100%; height: 435px;}
.i-news-list ul li a img{width: 100%; visibility: hidden;}

.i-news-mask {position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; line-height: 50px; background-image: linear-gradient(rgb(255,255,255,0), rgba(0,0,0,1)); color: #ffffff; padding: 0 30px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.i-news-list-center{float: left; width: 33.33%; margin-bottom: 15px;}
.i-news-list-center a{position: relative; display: block; width: 100%; height: 900px;}
.i-news-list-center a img{width: 100%; visibility: hidden;}

.i-news-list ul li a:hover .i-news-mask,
.i-news-list-center a:hover .i-news-mask{height: 100%; font-size: 18px; background-image: linear-gradient(rgb(255,255,255,0), rgba(0,0,0,1)); display: flex; align-items: center; /* justify-content: center; */}

@media (max-width:1200px) {
	.i-news-list ul li a{height: 360px;}
	.i-news-list-center a{ height: 720px;}
	.i-case-content .i-case-txt h3{font-size: 18px; }
}
@media (max-width:1200px) {
	.i-news-list ul li a{height: 260px;}
	.i-news-list-center a{ height: 550px;}
}
@media (max-width:840px) {
	.i-news-list ul li a:hover .i-news-mask,
	.i-news-list-center a:hover .i-news-mask{display: none;}
	.i-news-list ul,
	.i-news-list-center{width: 100%; padding: 0 ; }
	.i-news-list ul li a,
	.i-news-list-center a{height:auto;background: none !important;}
	.i-news-list-center a img{visibility: visible;}
	.i-news-list ul li a img,
	.i-news-list ul li a img{visibility: visible;}
	.i-news-title{margin: 20px 0; font-size: 14px;}
	.i-news-mask{font-size: 16px;}
}
@media (max-width:480px) {
	.i-news-mask{font-size: 14px;}
}

/*about*/
.i-about{position: relative;z-index: -2; padding: 80px 0; overflow: hidden;}
.i-about-backgound{position: absolute; top: 0; left: 102%; z-index: -1;}
.i-about #my-canvas {position: absolute;z-index: -1;width: 100%;}
.i-about #my-canvas canvas{position: absolute; top: 0; left: 0; width: 100%;}
.i-about-left{ width: 100%; text-align: center;}

.i-about-left h5{font-size: 16px; font-family: arial; color: #999; letter-spacing: 5px; margin: 15px 0;}
.i-about-left h2{font-size: 56px; margin-top: 0px;}
.i-about-left p{margin-top: 30px; font-size: 14px; line-height: 30px; color: #666;text-align:center;}
.i-about-left a{margin-top: 60px; display: inline-block;  padding: 0 25px; line-height: 40px; background-color: #333; color: #fff;}
.i-about-left a:hover {background-color: var(--main-color); color: #fff; border-color: var(--main-color);}

.i-about-right{float: right; width: 100%; text-align: center; }
.i-about-right img{ max-width: 100%; }

@media (max-width:840px) {
	.i-about{padding: 50px 0;}
	.i-about-left{width: 100%;}
	.i-about-right{}
	.i-about-left h5{font-size: 14px; letter-spacing: 2px;}
	.i-about-left h2{font-size: 38px;}
}
@media (max-width:380px) {
	.i-about{padding: 50px 0;}
}


.goLeft {
    -webkit-animation-name: goLeft;
    animation-name: goLeft;
}
@keyframes goLeft{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-30px,0,0);
		transform: translate3d(-30px,0,0)
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}
.goRight {
    -webkit-animation-name: goRight;
    animation-name: goRight;
}
@keyframes goRight{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(30px,0,0);
		transform: translate3d(30px,0,0)
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

.goUp {
    -webkit-animation-name: goUp;
    animation-name: goUp;
}

@keyframes goUp{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,30px,0);
		transform: translate3d(0,30px,0)
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}
.goDown {
    -webkit-animation-name: goDown;
    animation-name: goDown;
}
@keyframes goDown{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-30px,0);
		transform: translate3d(0,-30px,0)
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}


/* title */
.titleDown {
    -webkit-animation-name: titleDown;
    animation-name: titleDown;
}
@keyframes titleDown{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50px,0);
		transform: translate3d(0,-50px,0)
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}


/* bg */
.bgLeft {
    -webkit-animation-name: bgLeft;
    animation-name: bgLeft;
}
.bgRight {
    -webkit-animation-name: bgRight;
    animation-name: bgRight;
}
@keyframes bgLeft{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-80px,0,0);
		transform: translate3d(-80px,0,0);
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}
@keyframes bgRight{
	0% {
		opacity: 0;
		-webkit-transform: translate3d(80px,0,0);
		transform: translate3d(80px,0,0);
	}
	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}